<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue';

  type PositionStatus = 'normal' | 'top' | 'bottom';

  interface BarrageList {
    msg: string | undefined;
    position: PositionStatus;
  }

  const barrage = ref(null);

  // 响应式数据
  let data = reactive({
    barrageList: [] as Array<BarrageList>,
    position: 'normal',
    fontSize: 12,
    stageHeight: 300,
    barrageIsShow: true,
    currentId: 0,
    barrageLoop: true,
    speed: 10,
  });
  onMounted(() => {});
  const messageContent = ref('');
  const show = ref(false);
  const submitMessage = () => {
    if (messageContent.value.trim() === '') return;
    data.barrageList.push({
      msg: messageContent.value,
      position: 'normal',
    });
    messageContent.value = '';
  };
</script>

<template>
  <div class="comment-wall p-2" @keyup.enter="submitMessage">
    <div class="comment-wall-bg"></div>
    <div class="message-in" style="text-align: center">
      <h2 class="message-title">树洞</h2>
      <div>
        <input
          class="message-input input"
          type="text"
          style="outline: none; width: 70%"
          placeholder="留下点什么啦~"
          v-model="messageContent"
          @click="show = true"
          maxlength="60"
        />
        <button
          v-show="show"
          style="margin-left: 12px; cursor: pointer; width: 20%"
          @click="submitMessage"
          class="message-input btn"
          >发射
        </button>
      </div>
    </div>
    <!-- 弹幕 -->
    <div class="barrage-container">
      <vue3Barrage
        ref="barrage"
        :lanesCount="6"
        :boxHeight="data.stageHeight"
        :isShow="data.barrageIsShow"
        :list="data.barrageList"
        :loop="data.barrageLoop"
        :speed="data.speed"
        attachId="barrage"
        :fontSize="data.fontSize"
      >
        <template #barrage="{ item }">
          <span style="color: #fff; font-size: 1.2rem; line-height: 1.5">{{ item.msg }}</span>
        </template>
      </vue3Barrage>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .comment-wall {
    width: 100%;
    height: 100%;
    .comment-wall-bg {
      width: 100%;
      height: 100%;
      background: url(../../../assets/images/wall.png) no-repeat center center / cover;
    }
    .message-in {
      position: absolute;
      left: 50%;
      top: 40%;
      transform: translate(-50%, -50%);
      color: #fff;
      animation: hideToShow 2.5s;
      width: 360px;
      z-index: 10;
    }

    .message-title {
      user-select: none;
      text-align: center;
    }

    .message-input {
      border-radius: 9px;
      color: #dfdddd;
      background: rgba(0, 0, 0, 0.36);
      transition: background 0.3s ease-in-out;
      padding: 10px 10px;
      backdrop-filter: blur(10px);
      box-shadow: 0 0 10px 3px #0000001a;
    }

    .message-input::-webkit-input-placeholder {
      color: #fff;
    }
    .input {
      &:hover {
        background: rgba(0, 0, 0, 0.6);
      }
    }
    .btn {
      &:hover {
        background: rgba(0, 0, 0, 0.6);
      }
    }

    .barrage-container {
      position: absolute;
      top: 50px;
      left: 0;
      right: 0;
      bottom: 0;
      height: calc(100% - 50px);
      width: 100%;
      user-select: none;
      overflow: hidden;
    }
  }
</style>
